<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>评分组件</title>
    <link rel="stylesheet" href="../zujian/layui/css/layui.css">


</head>
<body>
<div id="test1"></div>


<script src="../zujian/layui/layui.all.js"></script>

<!--
分数设置
如若你设置分数，我们会根据你是否开启半星功能，来做一个具体的规范：

关闭半星功能:
小数值大于 0.5 ：分数向上取整，如 3.6 分，则系统自动更改为 4 分
小数值小于等于 0.5 ：分数向下取整，如 3.2 分，则系统自动更改为 3 分
如果在关闭半星功能的情况下开启了文本，你会发现你的分数也相应的变成了整数
开启半星功能:
不论你的小数值是 0.1 还是 0.9，都统一规划为 0.5，在文本开启的情况下，你可以看见你的分数并没有发生变化



自定义文本的回调
通过 setText 函数，在组件初次渲染和点击后时产生回调。我们默认文本以星级显示，
你可以根据自己设定的文字来替换我们的默认文本，如 “讨厌” “喜欢” 。
若用户选择分数而没有设定对应文字的情况下，系统会使用我们的默认文本
-->
<script>
    layui.use('rate', function(){
        let rate = layui.rate;

        //渲染
        let ins1 = rate.render({
            // 指向容器选择器
            elem: '#test1'  //绑定元素
            //评分组件中具体星星的个数。个数当然是整数啦，残缺的星星很可怜的，所以设置了小数点的组件我们会默认向下取整
            ,length:10
            //评分初始值
            ,value:3
            ,theme:'#3c3fff'
            // 设定组件是否可以选择半星,默认false
            ,half:true
            //是否显示评分对应的内容 ,比如 5.5星
            ,text:true
            //是否只读，即只用于展示而不可点 ,默认false
            ,readonly:false
            //通过 setText 函数，在组件初次渲染和点击后时产生回调。我们默认文本以星级显示，
            //你可以根据自己设定的文字来替换我们的默认文本，如 “讨厌” “喜欢” 。
            // 若用户选择分数而没有设定对应文字的情况下，系统会使用我们的默认文本
            //当你点击 3 星时，文本内容是中等，点击 5 星时，由于没有设定对应文字，所以文本会显示 5 星
            ,setText: function(value){
                let arrs = {
                    '1': '极差'
                    ,'2': '差'
                    ,'3': '中等'
                    ,'4': '好'
                };
                //设置点击后显示的内容
                this.span.text(arrs[value] || ( value + "星"));
            }
            // 通过 choose 实现函数，在组件被点击后触发，回调分数，用户可根据分数来设置效果，比如出现弹出层
            // 那么当你点击 5 星或更高星级时，页面就会弹出“么么哒”啦，你可根据相应需求在 choose 里完善你的代码
            ,choose: function(value){
                if(value > 4) alert( '么么哒' )
            }
        });
    });
</script>
</body>
</html>